<template>
  <div class="holder">
    <el-row :gutter="20">
      <!-- 左边 -->
      <el-col :xs="24" :sm="8" :lg="4">
        <div class="left">
          <!-- 标题 -->
          <div class="texttitle">
            考试人:<i>{{ name }}</i>
            <p>总分: 100分 时长：{{ times }}分钟</p>
          </div>
          <!-- 选项 -->
          <div class="tabcontrol">
            <ul class="sole">
              <li
                v-for="(item, index) in list"
                :key="index"
                :class="{
                  checked:
                    radio[index] !== radio[9999] ||
                    checkList[(index - 6) * 3] !== checkList[9999]
                      ? true
                      : false,
                }"
                @click="toTegional(index)"
              >
                {{ index + 1 }}
              </li>
            </ul>
          </div>
          <!-- 时间 -->
          <div class="times">
            剩余时间
            <p>
              <Countdowm :endTime="endTime" @childEvent="changtime"></Countdowm>
            </p>
          </div>
          <!-- 提交试卷 -->
          <div class="buttoner">
            <el-button type="primary" size="small" @click="submit">
              提交试卷
            </el-button>
          </div>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :xs="24" :sm="16" :lg="20">
        <div class="right">
          <el-alert
            title="请开始做答应，按照顺序做题，避免遗漏，到达时间自动交卷，诚信考试！"
            type="error"
            style="margin-bottom: 2px"
          />
          <div class="topic" v-for="(item, index) in list" :key="index">
            <!-- 判断题 -->
            <div class="top" v-if="item.type === 1">判断题</div>
            <!-- 选择题 -->
            <div class="top" v-if="item.type === 2">选择题 (单选)</div>
            <div class="top" v-if="item.type === 3">选择题 (多选)</div>
            <!-- 填空题 -->
            <div class="top" v-if="item.type === 4">填空题</div>
            <!-- 简答题 -->
            <div class="top" v-if="false">简答题</div>
            <!-- 选择题 -->
            <div class="txt" :id="'topic' + index">
              {{ index + 1 }}. {{ item.title }} （<i>{{ item.grade }}</i
              >分）
            </div>
            <el-radio-group v-model="radio[index]" v-if="item.qin === 1">
              <el-radio
                v-for="(n, index) in item.chirder"
                :key="index"
                :label="n.id"
                >{{ n.name }}</el-radio
              >
            </el-radio-group>
            <el-checkbox-group
              v-model="checkList"
              @change="onChange"
              v-if="item.qin === 2"
            >
              <el-checkbox
                v-for="(n, index) in item.chirder"
                :key="index"
                :label="n.id"
                >{{ n.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Countdowm from "@/components/countDown/index.vue";
export default {
  name: "testpaper",
  data() {
    return {
      // 考试者
      name: this.$route.query.name,
      // 时间
      times: this.$route.query.times,
      //   倒计时时间
      endTime: "",
      // 选择题值
      radio: [],
      checkList: [],
      //   题目数据
      list: [
        {
          title: "太和广业是2003年创建",
          grade: "5",
          shu: "6",
          qin: 1,
          type: 1,
          chirder: [
            {
              id: 6,
              name: "正确",
            },
            {
              id: 7,
              name: "错误",
            },
          ],
        },
        {
          type: 4,
          qin: 1,
          grade: "5",
          title: "太和广业核心竞争力是什么_____",
          chirder: [
            {
              id: 2,
              name: "整体解决方案，核心技术和管家服务",
            },
            {
              id: 3,
              name: "时间都i啊",
            },
            {
              id: 4,
              name: "思路框架搭建b",
            },
            {
              id: 5,
              name: "看i时间倒排",
            },
          ],
        },
        {
          type: 2,
          qin: 1,
          grade: "5",
          title: "秦学海讨厌谁",
          chirder: [
            {
              id: 2,
              name: "汤某个人",
            },
            {
              id: 3,
              name: "汤某个人",
            },
            {
              id: 4,
              name: "汤某个人",
            },
            {
              id: 5,
              name: "汤某个人",
            },
          ],
        },
        {
          grade: "5",
          qin: 1,
          title: "秦学海讨厌谁",
          chirder: [
            {
              id: 2,
              name: "汤某个人",
            },
            {
              id: 3,
              name: "汤某个人",
            },
            {
              id: 4,
              name: "汤某个人",
            },
            {
              id: 5,
              name: "汤某个人",
            },
          ],
        },
        {
          grade: "5",
          qin: 1,
          title: "秦学海讨厌谁",
          chirder: [
            {
              id: 2,
              name: "汤某个人",
            },
            {
              id: 3,
              name: "汤某个人",
            },
            {
              id: 4,
              name: "汤某个人",
            },
            {
              id: 5,
              name: "汤某个人",
            },
          ],
        },
        {
          grade: "5",
          qin: 1,
          title: "秦学海讨厌谁",
          chirder: [
            {
              id: 2,
              name: "汤某个人",
            },
            {
              id: 3,
              name: "汤某个人",
            },
            {
              id: 4,
              name: "汤某个人",
            },
            {
              id: 5,
              name: "汤某个人",
            },
          ],
        },
        {
          type: 3,
          qin: 2,
          grade: "5",
          title: "秦学海讨厌谁",
          chirder: [
            {
              id: 20,
              name: "汤某个人",
            },
            {
              id: 21,
              name: "汤某个人",
            },
            {
              id: 22,
              name: "汤某个人",
            },
            {
              id: 23,
              name: "汤某个人",
            },
          ],
        },
        {
          qin: 2,
          grade: "5",
          title: "秦学海讨厌谁",
          chirder: [
            {
              id: 50,
              name: "汤某个人",
            },
            {
              id: 51,
              name: "汤某个人",
            },
            {
              id: 52,
              name: "汤某个人",
            },
            {
              id: 53,
              name: "汤某个人",
            },
          ],
        },
      ],
    };
  },
  components: {
    Countdowm,
  },
  watch: {
    endTime: {
      handler(newval, oldval) {
        console.log("执行l");
        console.log("前后值", newval, oldval);
      },
    },
  },
  // created() {

  // },
  mounted() {},
  created() {
    this.timesdata();
    // this.$nextTick(() => {
    //   // 禁用右键
    //   document.oncontextmenu = new Function("event.returnValue=false");
    //   // 禁用选择
    //   document.onselectstart = new Function("event.returnValue=false");
    //   //禁止f12
    //   document.onkeydown = new Function("event.returnValue=false");
    // });

    // // 上面的禁止f12那段代码没有生效，但是加了下面这段就能生效。
    // document.onkeydown = function (e) {
    //   if (e && e.keyCode === 123) {
    //     e.returnValue = false;
    //     // e.keyCode = 0   //去掉也可以的，倘若要写，则需要setter 以及 getter配合使用，不配合，会报错
    //     return false;
    //   }
    // };
  },
  watch: {},
  methods: {
    // 时间
    timesdata() {
      let a = new Date().getTime();
      let b = this.times * 60 * 1000 + 1000;
      this.endTime = a + b;
      console.log("考试时间", this.endTime);
    },
    submit() {
      // this.$router.go(-1)
    },
    // 点击答题卡，到相应位置
    toTegional(index) {
      console.log("题目下标", index);
      let id = "#topic" + index;
      // 利用id锚点到相应位置
      document.querySelector(id).scrollIntoView(true);
    },
    // 多选事件
    onChange(item) {
      // let a = []
      console.log("多选数据", item);
      // let add = [];
      // add.id = item;
      // console.log(add);
      // this.checkList = add;
      // console.log("data", this.checkList);
    },
    // 时间到主动提交试卷
    changtime() {
      console.log("子组件传过来的值");
      //提交试卷
      console.log("试卷提交了");
    },
  },
  beforeDestroy() {
    console.log("考试到岸提交");
  },
};
</script>

<style lang="scss" scoped>
.holder {
  padding: 20px 90px;
  width: 100%;
  height: auto;
  background-color: #eff3f7;
  //   @media screen and (min-height: 950px) and (max-height: 990px) {
  //     padding: 45px 25px;
  //   }
  //   @media screen and (min-height: 1070px) {
  //     padding: 130px 25px;
  //   }
  .left {
    height: 898px;
    border: 1px solid #e4e7ed;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    padding: 25px 20px 0;
    font-family: "宋体";
    position: fixed;
    top: 20px;
    left: 90px;
    @media screen and (min-height: 950px) and (max-height: 990px) {
      height: 928px;
    }
    @media screen and (min-height: 1070px) {
      height: 1040px;
    }
    .texttitle {
      border-bottom: 1px solid #cccbcb;
      font-size: 18px;

      i {
        font-style: normal;
        font-weight: 700;
      }
    }
    .tabcontrol {
      height: auto;
      //   background-color: skyblue;
      border-bottom: 1px solid #cccbcb;
      .sole {
        width: 216px;
        // background-color: skyblue;
        margin: 20px 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        li {
          display: inline-block;
          width: 40px;
          height: 40px;
          background-color: #f4f4f5;
          margin-bottom: 5px;
          margin-right: 3px;
          border-radius: 3px;
          text-align: center;
          line-height: 40px;
          font-family: "宋体";
          border: 1px solid #e7e7e7;
          cursor: pointer;
        }
        .checked {
          background-color: #f0f9eb;
          border: 1px solid #d4f8c2;
          color: #88cf65;
          font-weight: 700;
        }
      }
    }
    .times {
      padding-top: 20px;
      height: 100px;
      font-size: 18px;
      text-align: center;
      border-bottom: 1px solid #eeecec;
      p {
        color: red;
        font-weight: 700;
        font-size: 20px;
      }
    }
    .buttoner {
      padding-top: 30px;
      display: flex;
      justify-content: center;
      align-content: center;
    }
  }
  .right {
    width: 100%;
    height: auto;
    min-height: 895px;
    background-color: #fff;
    border: 1px solid #e4e7ed;
    margin-left: 280px;
    .topic {
      padding-left: 50px;
      .top {
        height: 50px;
        min-width: calc(100% + 50px);
        background-color: #fafafa;
        line-height: 50px;
        font-size: 18px;
        padding-left: 50px;
        margin-bottom: 20px;
        font-family: "宋体";
        border-bottom: 1px solid rgb(221, 220, 220);
        position: relative;
        left: -50px;
        top: 0;
      }
      .txt {
        font-size: 20px;
        font-family: "等线";
        margin-top: 40px;
        i {
          font-style: normal;
        }
      }
      .el-radio-group,
      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        padding-top: 25px;
        padding-left: 50px;
        .el-radio,
        .el-checkbox {
          padding-bottom: 15px;
          // &:last-child {
          //   padding-bottom: 0;
          // }
        }
      }
    }
  }
}
</style>
